<template>
  <a @click="handleChange" type="text" :class="['sider-trigger-a', collapsed ? 'collapsed' : '']"><Icon :type="icon" :size="size" /></a>
</template>

<script>
export default {
  name: 'siderTrigger',
  props: {
    collapsed: Boolean,
    icon: {
      type: String,
      default: 'navicon-round'
    },
    size: {
      type: Number,
      default: 18
    }
  },
  data () {
    return {
      isSmall: false
    }
  },
  computed: {
    windSize () {
      return this.$store.state.app.windowSize
    },
    windSizeWdith () {
      return this.windSize.width
    }
  },
  watch: {
    windSizeWdith (newVal) {
      if (newVal < 800) {
        this.$emit('on-change', true)
      }
    }
  },
  methods: {
    handleChange () {
      this.$emit('on-change', !this.collapsed)
    }
  }
}
</script>

<style lang="less">
@import './sider-trigger.less';
</style>
<style lang="stylus" scoped>
@import './sider-trigger.styl'
</style>
